<template>
  <div class="about-page">
    <h1>This is an about page</h1>
    <p>{{ $name }}</p>
    <div class="item">
      <p class="title">发送请求</p>
      <el-button @click="sendQuest">发送请求</el-button>
    </div>
    <div class="item">
      <p class="title">路由跳转</p>
      <el-button @click="routerClick">跳转到主页</el-button>
    </div>
    <div class="item">
      <p class="title">倒计时</p>
      <count-down :countdownConfig="countdownConfig" @end="countdownEnd"></count-down>
    </div>
    <div class="item">
      <p class="title">过滤器</p>
      <div>{{ $filters.thousands(123456) }}</div>
      <div>{{ $filters.formatMoney(36.87912) }}</div>
    </div>
    <div class="item">
      <p class="title">计算属性computed</p>
      <div>{{ coupontypes(1) }}</div>
    </div>
    <div class="item">
      <p class="title">监听属性watch</p>
      <div class="mr10">{{ num }}</div>
      <el-button @click="add">数字+</el-button>
    </div>
  </div>
</template>

<script setup>
import api from "@/api";
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, watch, watchEffect, computed } from "vue";
import CountDown from "@/components/CountDown.vue";

// 使用浏览器指纹
import FingerprintJS from '@fingerprintjs/fingerprintjs';

// 初始化 FingerprintJS
const fpPromise = FingerprintJS.load();

// 获取指纹
fpPromise.then(fp => fp.get()).then((res) => {
    console.log('指纹是： ',res.visitorId);
})

const obj = ref({
    a: {
        b: {
            c: [{
                d: 110
            }]
        }
    }
})

const obj1 = reactive({
    a: {
        b: {
            c: 100
        }
    }
})

console.log('ref: ',obj.value.a.b.c[0].d)
console.log('reactive: ',obj1.a.b.c)

function f1() {
    var n = 10
    return {
        f2: function() {
            console.log(n)
        }
    }
}
f1()

const router = useRouter();

const { query } = useRoute();

console.log("query", query);

const num = ref(0);

const num2 = ref(6);

const countdownConfig = reactive({
  time: 5,
  btnText: "获取验证码",
  resetText: "重新发送",
  style: {
    color: "#fff",
    fontSize: "14px",
    backgroundColor: "#ef1f1f",
  },
});

// 计算属性
let coupontypes = computed(() => {
  return (type) => (type == 1 ? "代金券" : type == 2 ? "兑换券" : "未知");
});

// 监听属性
watch(num, (newVal, oldVal) => {
  console.log(`【监听】当前值：${num.value}, 新值：${newVal}, 旧值：${oldVal}`);
});

// 多个监听
watch([num, num2], ([newValA, oldValA], [newValB, oldValB]) => {
  console.log(`【多个数据监听】${num.value}, ${num2.value}`);
  console.log(newValA, oldValA, newValB, oldValB);
});

watchEffect(() => {
  console.log(
    `【watchEffect】 ${num.value} 提示：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行，watchEffect自动默认开启了immediate:true的功能，也就是立刻监听变化，元素一挂载就执行，组件卸载停止监听`
  );
});

function countdownEnd() {
  console.log("倒计时结束了");
}

function routerClick() {
  router.push(`/index?id=100`);
}

function sendQuest() {
  let data = {
    name: "111",
    pwd: "222",
  };
  api.login(data).then((res) => {
    console.log("发送请求");
    console.log(res);
  });
}

function add() {
  num.value++;
}
</script>

<style lang="less" scoped>
.about-page {
  .item {
    display: flex;
    align-items: center;
    height: 70px;
    line-height: 70px;
    .title {
      width: 160px;
      color: red;
    }
  }
}
</style>
